<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="选择线下门店" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		
		<view class="flex-col" v-if="list.length > 0">
		
			<view class="flex-col" v-for="(item,index) in list" :key="index" @click="itemClick(item)">
				<view class="flex-row justify-between items-center m-item">
					
					<view class="left">
						<!-- <image class="img" :src="item.doorboard_img"></image> -->
						<view class="flex-col name-text">
							<text>{{item.merchant_name}}</text>
							<text style="font-size: 26rpx;color: #999;">{{item.cust_addr}}</text>
						</view>
					</view>
					
					
					<view class="right">
						<view>{{item.distance_km}}</view>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		
		
		<view v-else class="flex-col items-center" style="margin-top: 80rpx;">
			<image src="/static/data_empty.png"></image>
			<text style="color: #c0c4cc;">暂无数据</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:'',
				list:[]
			};
		},
		onLoad(op) {
			this.orderId = op.order_id;
			this.getLocation();
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		methods:{
			itemClick(item){
				let that = this;
				uni.showModal({
					title:  '提示',
					content: '确认选择该门店使用？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.bindMerchant(item.merchant_id);
						}
					}
				})
			},
			bindMerchant(id){
				this.$request({
					url:'?c=Order&a=storeBindingSelection',
					type:'post',
					data:{
						order_id:this.orderId,
						merchant_id:id
					}
				}).then(res =>{
					uni.showToast({
						title:'成功'
					})
					setTimeout(() =>{
						 // uni.$emit('refresh1', 1);
						 uni.navigateBack();
					},500)
				})
			},
			getMerchantList(lat,lng){
				this.$request({
					url: '?c=Order&a=storeSelection',
					type: 'post',
					data:{
						order_id:this.orderId,
						longitude:lat,
						latitude:lng
					}
				}).then(res =>{
					// console.log(res)
					if(res.data != null){
						this.list = res.data;
					}
				})
			},
			async getLocation() {
				uni.setStorageSync('local', {
					lon: this.logs,
					lat: this.lats
				});
				try {
					const res = await this.getCurrentLocation();
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.lons = res.longitude;
					this.lats = res.latitude;
					uni.setStorageSync('local', {
						lon: this.lons,
						lat: this.lats
					})
					this.getMerchantList(res.longitude,res.latitude);
				} catch (error) {
					this.getMerchantList(this.lons,this.lats);
				}
			},
			// 检查权限并获取位置
			async getCurrentLocation() {
				// 返回一个 Promise 对象，用于异步处理位置获取
				return new Promise((resolve, reject) => {
					// 调用 uni.authorize 方法检查用户是否已授权位置信息
					uni.authorize({
						scope: 'scope.userLocation', // 指定需要授权的范围为用户位置信息
						success: () => {
							// 如果用户已授权或成功授权
							uni.getLocation({
								type: 'wgs84', // 指定返回的位置坐标系为 WGS84
								success: (res) => {
									// 如果成功获取位置信息
									resolve(res); // 将位置信息通过 resolve 返回
								},
								fail: (err) => {
									// 如果获取位置信息失败
									reject(err); // 将错误通过 reject 抛出
								}
							});
						},
						fail: () => {
							// 如果用户未授权或拒绝授权
							uni.showModal({
								title: '权限提示', // 弹窗标题
								content: '需要获取您的位置信息，请前往设置开启权限', // 弹窗内容
								success: (res) => {
									// 弹窗关闭后的回调
									if (res.confirm) {
										// 如果用户点击了“确定”按钮
										uni.openSetting(); // 打开设置页面，让用户手动开启权限
									}
									// 抛出错误，提示用户拒绝授权
									reject(new Error('用户拒绝授权'));
								}
							});
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}
.m-item{
	width: 100%;
	background-color: #fff;
	padding: 20rpx;
}
.left{
	display: flex;
	flex-direction: row;
	// justify-content: flex-start;
	width: 80%;
	.img{
		width: 100rpx;
		height: 100rpx;
	}
	.name-text{
		margin-left: 15rpx;
		width: 100%;
	    flex: 1;
	}
}
.right{
	display: flex;
	width: 20%;
	text-align: center;
	justify-content: flex-end;
	margin-right: 20rpx;
	font-size: 25rpx;
	color: #999;
}
.line{
	border: 1px solid #f5f5f5;
	// margin-top: 25rpx;
}
</style>
